<template>
  <div>
    <div class="surperbigbox">
      <div class="header">
      <div class="header-con">
        <div>平顶山</div>
        <div><input type="text"></div>
        <div><span class="iconfont icon-saomiao"></span></div>
        <div><span class="iconfont icon-duanxin"></span></div>
        <div><span class="iconfont icon-24gf-ellipsis"></span></div>
        
      </div>
      <div class="header-bigbox">
        <div class="header-bigbox-box"><span class="iconfont icon-taocanyuliang"></span><br>套餐余量</div>
        <div class="header-bigbox-box"><span class="iconfont icon-chongzhijiaofei"></span><br>充值交费</div>
        <div class="header-bigbox-box"><span class="iconfont icon-zhangdanchaxun-weichuzhangdan"></span><br>账单查询</div>
        <div class="header-bigbox-box"><span class="iconfont icon-meiriqiandao"></span><br>每日签到</div>
      </div>
    </div>
    <div class="liuliang">
      <div><span class="s1">99.99GB</span><br><span  class="s2">通用流量已用</span></div>
      <div><span class="s1">99.99</span><br><span  class="s2">话费余额</span></div>
      <div><span class="s1">99.99</span><br><span  class="s2">语音剩余</span></div>
      <div><span class="s1">99999</span><br><span class="s2">积分</span></div>
    </div>
      <Product/>
    <div class="toutiao">
      <div class="toutiao-con">
        <span>头</span>
        <span>条</span>丨
       <span>公示</span>&nbsp;&nbsp;
       <span>中国移动在售资费公式</span>
      </div>
    </div>
     <Yswipe/>
     <div class="remenhuodong">
       <div class="remenhuodong-con">
         <div  class="remenhuodong-con-a">
           <span>热门活动</span>
           <button>更多优惠></button>
         </div>
         <div class="remenhuodong-con-b">
           <div class="remenhuodong-con-b-left">
             <img src="img/yueimg/79.jpg" alt="">
           </div>
           <div class="remenhuodong-con-b-right">
             <div class="remenhuodong-con-b-right-box"><img src="img/yueimg/80.jpg" alt=""></div>
             <div class="remenhuodong-con-b-right-box"><img src="img/yueimg/81.jpg" alt=""></div>
             <div class="remenhuodong-con-b-right-box"><img src="img/yueimg/82.jpg" alt=""></div>
             <div class="remenhuodong-con-b-right-box"><img src="img/yueimg/83.jpg" alt=""></div>
           </div>
         </div>
       </div>
     </div>
     <div class="liuliangzhuanqu">
       <div class="liuliangzhuanqu-con">
         <div class="liuliangzhuanqu-con-a">
           <span>流量专区</span>
           <button>更多></button>
           <div  class="liuliangzhuanqu-con-b">
             <img src="img/yueimg/8.jpg">
           </div>
         </div>
         <div class="liuliangzhuanqu-con-c">
           <div class="liuliangzhuanqu-con-c-left"><img src="img/yueimg/84.jpg" alt=""><span>30元15G</span></div>
           <div class="liuliangzhuanqu-con-c-right"><img src="img/yueimg/85.jpg" alt=""><span>2元10G</span></div>
         </div>
         <div class="liuliangzhuanqu-con-d">
           <div class="liuliangzhuanqu-con-d-box"><img src="img/yueimg/86.jpg" alt=""><div class="liuliangzhuanqu-con-d-box-fonta">一分钱抢会员</div><div class="liuliangzhuanqu-con-d-box-fontb">15GB追剧流量</div></div>
           <div class="liuliangzhuanqu-con-d-box"><img src="img/yueimg/87.jpg" alt=""><div class="liuliangzhuanqu-con-d-box-fonta">仅15.元</div><div class="liuliangzhuanqu-con-d-box-fontb">15GB+会员</div></div>
           <div class="liuliangzhuanqu-con-d-box"><img src="img/yueimg/88.jpg" alt=""><div class="liuliangzhuanqu-con-d-box-fonta">七天流量包</div><div class="liuliangzhuanqu-con-d-box-fontb">送黄金会员</div></div>
           <div class="liuliangzhuanqu-con-d-box"><img src="img/yueimg/89.jpg" alt=""><div class="liuliangzhuanqu-con-d-box-fonta">暖心七天包</div><div class="liuliangzhuanqu-con-d-box-fontb">12元5GB</div></div>
           <div class="liuliangzhuanqu-con-d-box"><img src="img/yueimg/90.jpg" alt=""><div class="liuliangzhuanqu-con-d-box-fonta">25GB+会员...</div><div class="liuliangzhuanqu-con-d-box-fontb">会员流量随心用</div></div>
           <div class="liuliangzhuanqu-con-d-box"><img src="img/yueimg/91.jpg" alt=""><div class="liuliangzhuanqu-con-d-box-fonta">0元600GB</div><div class="liuliangzhuanqu-con-d-box-fontb">限时免费领</div></div>
         </div>
       </div>
     </div>
     <div class="taocanzhuanqu">
       <div class="taocanzhuanqu-con">

       </div>
     </div>
    </div>
     <Bottom/>
  </div>
   
</template>

<script>
import Product from "@/components/yue/product.vue"
import Yswipe from "@/components/yue/yswipe.vue"
import $http from "@/apis/link.js"
export default {
  components:{
    Product,Yswipe
  },
  data(){
    return{
      arr:[]
    }
  },
  mounted(){
    $http({
      url:"/data/list",
      method:"get"
    }).then((ok)=>{
      this.arr = ok.data
      console.log(ok.data);
    }).catch((err)=>{
      console.log(err);
    })
  }
}
</script>

<style  scoped>
.surperbigbox{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header{
  width: 100%;
  height: 2rem;
  background-image: repeating-linear-gradient(to right,#4c83f6,#4068f4);
  overflow: hidden;
}

.header .header-con{
  width: 3.9rem;
  height: 0.66rem;
  background-color:rgba(255, 255, 255, 0.589);
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: fixed;
  z-index: 99;
}

.header .header-con span{
  font-size: 0.2rem;
}

.header .header-con input{
  border-radius: 0.1rem;
  border:none;
  width: 1.65rem;
  height: 0.28rem;
}

.header .header-one{
  color:white;
  transform: translateY(-0.62rem);
  margin-left: 0.1rem;
}


.header .header-bigbox{
  width: 100%;
  height: 0.6rem;
  display: flex;
  justify-content: space-evenly;
  margin-top: 0.8rem;
  text-align: center;
  line-height: 0.265rem;
}

.header .header-bigbox span{
  font-size: 0.29rem;
  
}

.header .header-bigbox .header-bigbox-box{
  width: 0.56rem;
  height: 0.6rem;
  font-size: 0.12rem;
}

.liuliang{
  width: 3.6rem;
  height: 0.74rem;
  position:absolute;
  top: 1.76rem;
  left: 0.15rem;
  border-radius: 10PX;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #ceeaff;
}

.liuliang div{
  width: 0.75rem;
  height: 0.41rem;
  text-align: center;
}

.liuliang div .s1{
  font-size: 0.17rem;
}

.liuliang div .s2{
  font-size: 0.1rem;
}

.toutiao{
  width: 100%;
}

.toutiao .toutiao-con{
  width: 3.3rem;
  height: 0.31rem;
  background-color: #f6f7fc;
  margin: auto;
  border-radius: 0.1rem;
}

.toutiao .toutiao-con span{
  line-height: 0.31rem;
}

.remenhuodong{
  width: 100%;
}

.remenhuodong .remenhuodong-con{
  width: 3.31rem;
  height: 2.27rem;
  background-image: linear-gradient(to bottom,#ceeaff,white);
  margin-top: 0.1rem;
  margin-left: 0.28rem;
  overflow: hidden;
  border-radius: 0.1rem;
}

.remenhuodong .remenhuodong-con .remenhuodong-con-a{
  margin-top: 0.1rem;
}

.remenhuodong .remenhuodong-con .remenhuodong-con-a button{
  width: 0.62rem;
  height: 0.2rem;
  font-size: 0.01rem;
  background-color: #65c6fe;
  border-radius: 0.1rem;
  border: none;
  outline: none;
  transform: translateX(1.9rem);
}

.remenhuodong .remenhuodong-con .remenhuodong-con-a span{
  font-size: 0.15rem;
}

.remenhuodong .remenhuodong-con .remenhuodong-con-b{
  width: 3.15rem;
  height: 1.80rem;
  margin-top: 0.12rem;
  margin-left:0.08rem;
}

.remenhuodong .remenhuodong-con .remenhuodong-con-b .remenhuodong-con-b-left{
  width: 1.34rem;
  height: 1.79rem;
  float: left;
}

.remenhuodong .remenhuodong-con .remenhuodong-con-b .remenhuodong-con-b-left img{
  width: 100%;
  height: 100%;
}

.remenhuodong .remenhuodong-con .remenhuodong-con-b .remenhuodong-con-b-right{
  width: 1.73rem;
  height: 1.79rem;
  float: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.remenhuodong .remenhuodong-con .remenhuodong-con-b .remenhuodong-con-b-right .remenhuodong-con-b-right-box{
  width: 0.85rem;
  height: 0.85rem;
  background-color: #ceeaff;
}

.remenhuodong .remenhuodong-con .remenhuodong-con-b .remenhuodong-con-b-right .remenhuodong-con-b-right-box img{
  width: 100%;
  height: 100%;
}

.liuliangzhuanqu{
  width: 100%;
}

.liuliangzhuanqu .liuliangzhuanqu-con{
  width: 3.31rem;
  height: 4.02rem;
  margin: auto;
  overflow: hidden;
}

.liuliangzhuanqu .liuliangzhuanqu-con .liuliangzhuanqu-con-a{
  margin-top: 0.08rem;
}

.liuliangzhuanqu .liuliangzhuanqu-con .liuliangzhuanqu-con-a button{
    width: 0.62rem;
  height: 0.2rem;
  font-size: 0.01rem;
  background-color: #65c6fe;
  border-radius: 0.1rem;
  border: none;
  outline: none;
  transform: translateX(1.9rem);
}

.liuliangzhuanqu .liuliangzhuanqu-con .liuliangzhuanqu-con-b{
  width: 3.35rem;
  height: 0.77rem;
  margin-top: 0.12rem;
}

.liuliangzhuanqu .liuliangzhuanqu-con .liuliangzhuanqu-con-b img{
  width: 100%;
  height: 100%;
}

.liuliangzhuanqu .liuliangzhuanqu-con .liuliangzhuanqu-con-c{
  width: 3.35rem;
  height: 0.6rem;
  margin-top: 0.08rem;
  display: flex;
  justify-content: space-between;
}

.liuliangzhuanqu .liuliangzhuanqu-con .liuliangzhuanqu-con-c .liuliangzhuanqu-con-c-left,.liuliangzhuanqu-con-c-right{
  width: 1.6rem;
  height: 0.6rem;
  border-radius: 0.15rem;
}

.liuliangzhuanqu .liuliangzhuanqu-con .liuliangzhuanqu-con-c img{
  width: 0.7rem;
  height: 0.4rem;
  margin-top: 0.1rem;
  margin-left: 0.1rem;
}

.liuliangzhuanqu .liuliangzhuanqu-con .liuliangzhuanqu-con-d{
  width: 3.35rem;
  height: 2.22rem;
  margin-top: 0.06rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.liuliangzhuanqu .liuliangzhuanqu-con .liuliangzhuanqu-con-d .liuliangzhuanqu-con-d-box{
  width: 1.07rem;
  height: 1.05rem;
}

.liuliangzhuanqu .liuliangzhuanqu-con .liuliangzhuanqu-con-d .liuliangzhuanqu-con-d-box img{
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.09rem;
  margin-left: 0.3rem;
}

.liuliangzhuanqu .liuliangzhuanqu-con .liuliangzhuanqu-con-d .liuliangzhuanqu-con-d-box .liuliangzhuanqu-con-d-box-fonta{
  font-size: 0.11rem;
  text-align: center;
  margin-top: 0.09rem;
  margin-bottom: 0.05rem;
}

.liuliangzhuanqu .liuliangzhuanqu-con .liuliangzhuanqu-con-d .liuliangzhuanqu-con-d-box .liuliangzhuanqu-con-d-box-fontb{
  color: gray;
  font-size: 0.09rem;
  text-align: center;
}

.taocanzhuanqu{
  width: 100%;
}

.taocanzhuanqu .taocanzhuanqu-con{
  width: 3.31rem;
  height: 0.83rem;
}
</style>